<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import router from '@/router/index.js'
import { useTradingAccountStore } from '@/stores/stock'
import { ListTradingAccount, CreateTradingAccount } from '@/api/note'
import { Plus } from '@element-plus/icons-vue'

const username = ref(localStorage.getItem('username'))
const store = useTradingAccountStore()

const dialog = reactive({
  addTradingAccountForm: false,
})

// 页面初始化
onMounted(() => {
  if (store.tradingAccountList.length === 0) {
    ListTradingAccount().then((response) => {
      if (response.code === 0) {
        let data = response.data
        store.setTradingAccountList(data)
        for (let i = 0; i < data.length; i++) {
          if (data[i].isDefault) {
            store.setCurrentTradingAccount(data[i].id, data[i].name, data[i].remark)
          }
        }
      }
    })
  }
})

// 账户管理
const switchTradingAccount = function (item) {
  store.setCurrentTradingAccount(item.id, item.name, item.remark)
  router.push('/note/stock/list')
}

const addTradingAccountForm = ref({
  name: '',
  remark: '',
})

const AddTradingAccount = function () {
  CreateTradingAccount(addTradingAccountForm.value.name, addTradingAccountForm.value.remark).then(
    (resp) => {
      if (resp.code === 0) {
        ElMessage.success(resp.msg)
        dialog.addTradingAccountForm = false

        ListTradingAccount().then((resp) => {
          if (resp.code === 0) {
            store.setTradingAccountList(resp.data)
          }
        })
      }
    },
  )
}

const logout = function (item) {
  console.log('logout', item)
  localStorage.removeItem('token')
  router.push('/login')
}
</script>

<template>
  <el-container class="page">
    <el-header class="header">
      <el-menu
        router
        default-active="/note"
        class="el-header-menu"
        mode="horizontal"
        text-color="#fff"
        background-color="#2f2d29"
        active-text-color="#ffd04b"
        :ellipsis="false"
      >
        <el-menu-item index="/square">square</el-menu-item>
        <el-menu-item index="/note">note</el-menu-item>

        <el-sub-menu index="2">
          <template #title>{{ store.currentTradingAccount.name }}</template>
          <el-menu-item
            index=""
            v-for="item in store.tradingAccountList"
            :key="item.id"
            @click="switchTradingAccount(item)"
          >
            {{ item.name }}
          </el-menu-item>
          <el-menu-item index="" @click="dialog.addTradingAccountForm = true">
            <el-icon><Plus /></el-icon>添加</el-menu-item
          >
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>{{ username }}</template>
          <el-menu-item index="2-1">个人信息</el-menu-item>
          <el-menu-item index="" @click="logout">退出</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-header>

    <RouterView />
  </el-container>

  <!--    添加交易账户弹框   -->
  <el-dialog v-model="dialog.addTradingAccountForm" title="添加账户" width="500">
    <el-form :model="addTradingAccountForm">
      <el-form-item label="名称" label-width="60px">
        <el-input v-model="addTradingAccountForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注" label-width="60px">
        <el-input v-model="addTradingAccountForm.remark" autocomplete="off" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button type="primary" @click="AddTradingAccount">确认</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.header {
  background: #2f2d29;
  padding: 0;
}
.el-header-menu {
  border-bottom: 0;
}

.el-menu--horizontal > .el-menu-item:nth-child(2) {
  margin-right: auto;
}
</style>
